<template>
  <div class="goodsDetail page">
    <div v-if="$env === 'alipay'" class="lift-account items-center">
      <button
        class="lifestyle"
        openType="lifestyle"
        publicId="2021002128666495"
        @CheckFollow="checkFollow"
      />
      <img
        src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/common/logo.png"
        alt=""
        class="logo"
      />
      <span class="text">租机虫-生活号</span>
      <span class="btn">+关注</span>
    </div>

    <!-- 头部 -->
    <div class="header">
      <Swipe :data.sync="swiperImgs" />
    </div>

    <!-- 基本信息 -->
    <div class="info bg-white flex-col">
      <!-- <img
        v-if="$env === 'alipay'"
        src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/zmxy-tips.png"
        alt=""
        class="zmxy"
      /> -->
      <div class="info-img">
        <img src="../../static/icones/detail_banner.png" alt="" />
      </div>
      <div class="info-content flex-col">
        <div class="content-price">
          <div class="msg">
            <div class="new-price">
              ￥{{ goodsInfo.minimumRentPrice }}<span>/天起</span>
            </div>
            <div class="text">￥{{ goodsInfo.sourcePrice || "0.00" }}/天</div>
          </div>
          <div class="qrcode">
            <div class="qrtitle">平台券|满100减20</div>
            <div class="qrcollect">领券 ></div>
          </div>
        </div>
        <div class="content-title">
          <div class="titless">
            <span class="title">
              <span class="brandnew">全新</span
              ><span class="newtitle">{{ goodsInfo.name }} </span></span
            >
          </div>
          <div class="namess">{{ goodsInfo.tip }}</div>
        </div>
        <!-- 优惠券 -->
        <!-- <GoodsQuan :show-get="true" /> -->
      </div>
    </div>

    <!-- 规格 -->
    <div class="base bg-white flex-col items-center">
      <div class="item" @click="goAliapp">
        <span class="name">已选</span>
        <div class="text">
          请选择租期；规格；数量；其他服务
          <img
            src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/flow-right.png"
            alt=""
            class="flow-right"
          />
        </div>
      </div>
      <div class="item">
        <span class="name">发货</span>
        <div class="text">
          <span
            v-for="(item, index) in goodsInfo.deliveryTypeString"
            :key="`delivery${index}`"
            class="tag"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
    <!-- 栏目 -->
    <!-- <GoodsTabs :tabsData.sync="tabsData" /> -->
    <div class="goods-tabs">
      <div class="tabs justify-between items-center bg-white">
        <div
          class="item flex-col justify-center"
          :class="{ select: currentTab === index }"
          v-for="(tab, index) in tabs"
          :key="`tab${index}`"
          @tap="changeTab(index)"
        >
          <span>{{ tab }}</span>
        </div>
      </div>

      <view class="taro_html" v-if="currentTab == 0">
        <u-parse :content="goodsDetails"></u-parse>
      </view>
      <div class="taro_html" v-if="currentTab == 1">
        <u-parse :content="rentInstructions"></u-parse>
      </div>
      <QA v-if="currentTab === 2" />

      <GoodsComment v-show="currentTab === 3" />
      <div class="tips flex-col">
        <p class="title">温馨提示</p>
        <div class="content">
          点击“免押租”按钮后即默认您已阅读和接受上述产品页面信息，且
          回意授权平台将您的个人信息用于租赁交易的风险评估。
        </div>
      </div>
    </div>

    <!-- 商品推荐 -->
    <!-- <GoodsRecomm
      v-if="recommendGoodsList.length > 0"
      :data.sync="recommendGoodsList"
      :store.sync="store"
    /> -->

    <!-- 底部按钮 -->
    <div class="bottom bg-white flex-row">
      <div class="left items-center">
        <div class="item" @tap="$goPage('/pages/index/index')">
          <img
            src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/goods-home.png"
            alt=""
            class="icon"
          />
          <span class="text">首页</span>
        </div>
        <div class="item" @tap="setStar">
          <img
            :src="goodsInfo.isCollection === 1 ? stared : star"
            alt=""
            class="icon"
          />
          <span class="text">收藏</span>
        </div>
        <div class="item" @tap="showServer = true">
          <img
            src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/goods-server.png"
            alt=""
            class="icon"
          />
          <span class="text">客服</span>
        </div>
      </div>
      <div v-if="$checkStatus === '0'" class="right items-center">
        <img
          src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/goods-btn.png"
          alt=""
          class="goods-btn"
          @tap="goAliapp"
        />
      </div>
    </div>

    <!-- 以下为弹窗 -->

    <!-- 客服弹窗 -->
    <!-- <ServerDialog v-model="showServer" /> -->
    <!-- 客服弹窗 -->
    <!-- <ServerDialog
      v-model="showServer"
      :platform-telephone.sync="phone.platformTelephone"
      :store-telephone.sync="phone.storeTelephone"
    /> -->

    <!-- 商品属性弹窗 -->
    <GoodsAttr
      v-model="showAttr"
      :goods-info.sync="goodsInfo"
      :showAttr="showAttr"
    />

    <!-- 安心服务 -->
    <!-- <SafeServe v-model="showServe" :data.sync="safeServe" /> -->

    <!-- 复制弹窗 -->
    <!-- <CopyDialog v-model="showCopy" :url.sync="url" /> -->
  </div>
</template>

<script>
// import * as Taro from "@tarojs/components";
// import { mapGetters } from "vuex";
import Swipe from "./components/swipe";
import TopInfo from "./components/top";
import Help from "./components/help";
import goodsTabs from "./components/goodsTabs";
import GoodsRecomm from "./components/goodsRecomm";
// import ServerDialog from "@components/serverDialog";
import GoodsAttr from "./components/goodsAttr";
import GoodsQuan from "./components/goodsQuan";
import SafeServe from "./components/safeServe";
import { getGoodsDetail } from "../../config/api";
import QA from "./components/qa.vue";
import GoodsComment from "./components/goodsComment.vue";

export default {
  components: {
    Swipe,
    TopInfo,
    Help,
    goodsTabs,
    GoodsRecomm,
    // ServerDialog,
    GoodsAttr,
    GoodsQuan,
    SafeServe,
    QA,
    GoodsComment,
  },
  data() {
    return {
      star: "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/collection.png",
      stared:
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/collectioned.png",
      showServer: false,
      showAttr: false,
      showQuan: false,
      showServe: false,
      goodsId: "",
      storeId: "",
      type: "",
      couponId: "",
      data: {
        page: 1,
        goodsId: "",
      },
      goodsDetails: "",
      rentInstructions: "",
      phone: {
        platformTelephone: NaN,
        storeTelephone: NaN,
      },
      goodsInfo: { goodsSpecDTOList: [] }, // 商品信息
      recommendGoodsList: [], // 推荐商品
      selectItem: {}, //
      swiperImgs: [], // 轮播图
      safeServe: [], // 安心服务
      showCopy: false,
      //   url: "",
      store: {},
      showFollow: true,
      showFollowBtn: true,
      tabs: ["商品介绍", "租赁说明", "问题解答", "宝贝评论"], //商品详情
      currentTab: 0,
    };
  },
  onLoad(options) {
    this.goodsId = options.cid;
    // console.log(options, "options");
  },
  computed: {
    // ...mapGetters("goods", {
    //   couponList: "getCouponList",
    // }),
  },
  mounted() {
    // console.log(this.$route, "lllllllll");
    // const { id, type, couponId } = this.$query();
    // this.goodsId = Number(id);
    // this.type = Number(type);
    // if (couponId) {
    //   this.couponId = Number(this.couponId);
    //   this.receiveCoupon();
    // }
    this.getGoodsDetail();
  },
  onShareAppMessage() {
    return {
      title: this.$appName,
      desc: "免押金租赁，首月0元租到手",
      path: `/pages/goodsDetail/index?type=${this.type}&id=${this.goodsId}`,
    };
  },
  methods: {
    //获取商品详情
    getGoodsDetail() {
      const params = {
        ...(this.type === 1
          ? { chInfo: this.goodsId }
          : { goodsId: Number(this.goodsId) }),
      };
      getGoodsDetail({
        couponId: this.couponId,
        ...params,
        sessionId: "c22eeb72a2abdc87a2e8b2c6865d230d_61985",
      }).then(({ data: { goodsDetailDTO } }) => {
        console.log(
          this.data,
          goodsDetailDTO,
          goodsDetailDTO.images,
          "66666666666666666666"
        );
        const {
          id,
          storeId,
          goodsDetails,
          rentInstructions,
          minimumRentPrice,
          recommendGoodsList,
          images,
          goodsSpecDTOList,
          addServiceDTOList,
          platformTelephone,
          storeTelphone,
          deliveryTypeString,
          store,
        } = goodsDetailDTO;
        this.swiperImgs = images.includes(";") ? images.split(";") : [images];
        // console.log(this.swiperImgs, "6555555555555555");
        const goodsDetailsNew = goodsDetails.replace(/%/g, "%25");
        this.goodsDetails = goodsDetails;
        this.rentInstructions = rentInstructions;
        this.safeServe = addServiceDTOList;
        this.goodsInfo = {
          ...goodsDetailDTO,
          // ...this.$utils.changePrice(minimumRentPrice),
          sourcePrice: ((10000 * minimumRentPrice * 1.21) / 10000).toFixed(2),
          deliveryTypeString: deliveryTypeString
            ? deliveryTypeString.includes("/")
              ? deliveryTypeString.split("/")
              : [deliveryTypeString]
            : [],
        };
        console.log(
          this.goodsDetails,
          this.rentInstructions,
          "55555555555555555555====="
        );
        return;
        this.data.goodsId = id;
        this.storeId = storeId;
        this.store = store;
        this.recommendGoodsList = recommendGoodsList;
        this.selectItem = goodsSpecDTOList[0];
        this.swiperImgs = images.includes(";") ? images.split(";") : [images];
        this.$store.dispatch("goods/setGoodsId", this.goodsId);
        this.$store.dispatch("goods/setStoreId", storeId);
        this.$store.dispatch("goods/getCouponList"); // 获取优惠券
        this.phone.platformTelephone = Number(platformTelephone);
        // console.log(this.phone.platformTelephone);
        this.phone.storeTelephone = Number(store.storeTelephone);
      });
    },
    //商品详情切换
    changeTab(index) {
      this.currentTab = index;
      console.log(this.currentTab, index, "--=---");
    },
    receiveCoupon() {
      //   this.$checkLogin().then(() => {
      //     this.$http.request({
      //       url: "/index/autoReceive.json",
      //       data: {
      //         couponId: this.couponId,
      //       },
      //     });
      //   });
    },
    controlCoupon() {
      if (this.couponList.length > 0) {
        this.showQuan = true;
      }
    },
    controlServe() {
      if (this.safeServe.length > 0) {
        this.showServe = true;
      }
    },
    goAliapp() {
      this.showAttr = true;
      //   if (this.$env === "alipay") {
      //     // 支付宝内
      //   } else {
      //     const aliUrl = `alipays%3A%2F%2Fplatformapi%2Fstartapp%3FappId%3D2021002110607982%26page%3Dpages%252FgoodsDetail%252Findex%253Ftype%253D${this.type}%2526id%253D${this.goodsId}`;
      //     // const url = `https://render.alipay.com/p/s/i/?scheme=${aliUrl}`
      //     const url = `https://render.alipay.com/p/s/i/?scheme=${aliUrl}`;
      //     // this.$goCopy(url)
      //     this.url = url;
      //     this.showCopy = true;
      //   }
    },
    setStar() {
      //   this.$checkLogin().then(() => {
      //     this.$http
      //       .request({
      //         url: "/index/addCollection.json",
      //         data: {
      //           targetId: this.goodsId,
      //           type: 1,
      //         },
      //       })
      //       .then(() => {
      //         this.$taro.showToast({
      //           title: `${
      //             this.goodsInfo.isCollection === 2 ? "收藏成功" : "取消收藏"
      //           }`,
      //           icon: "success",
      //         });
      //         this.goodsInfo.isCollection =
      //           this.goodsInfo.isCollection === 2 ? 1 : 2;
      //       });
      //   });
    },
    checkFollow({ detail }) {
      const { followed, closeCount } = detail;
      this.showFollow = false;
      if (!followed) {
        this.showFollowBtn = true;
      }
    },
    closeFollow() {},
  },
};
</script>
<style lang="scss">
.goodsDetail {
  width: 100vw;
  height: 100vh;
  background-color: #f8f8f8;
  //   padding-bottom: calc(constant(safe-area-inset-bottom) + 70px);
  //   padding-bottom: calc(env(safe-area-inset-bottom) + 70px);
  // &.pageHeight {
  //   height: 100vh;
  //   overflow-y: hidden;
  // }
  // .lift-account {
  //   width: 100%;
  //   height: 48px;
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   z-index: 10;
  //   background-color: rgba(75, 154, 209, 0.25);
  //   .lifestyle {
  //     width: 100%;
  //     height: 100%;
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //     z-index: 10;
  //     opacity: 0;
  //   }
  //   .logo {
  //     width: 40px;
  //     height: 40px;
  //     margin-left: 12px;
  //   }
  //   .text {
  //     margin-left: 7px;
  //     color: #ffffff;
  //     font-size: 16px;
  //   }
  //   .btn {
  //     width: 80px;
  //     height: 28px;
  //     line-height: 30px;
  //     border-radius: 14px;
  //     background-color: #0096ff;
  //     text-align: center;
  //     color: #ffffff;
  //     font-size: 14px;
  //     margin-left: auto;
  //     margin-right: 16px;
  //   }
  // }
  .header {
    width: 100%;
    height: 750rpx;
    position: relative;
  }
  .info {
    width: 100%;
    min-height: 88px;
    overflow: auto;
    .info-img {
      width: 100%;
      height: 88rpx;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .info-content {
      height: 179px;
      padding: 0 15px;
      //   overflow: auto;
      .content-price {
        width: 100%;
        height: 81px;
        font-size: 14px;
        color: #9d9d99;
        font-family: PingFang SC Medium;
        .msg {
          height: 51px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .new-price {
            font-family: DINPro-Bold;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0em;
            color: #eb0a0a;
            span {
              font-size: 14px;
              color: #9d9d99;
            }
          }
          .text {
            padding-top: 5px;
            margin-left: 20px;
            text-decoration: line-through;
          }
        }
        .qrcode {
          width: 100%;
          height: 30px;
          color: #eb0a0a;
          display: flex;
          justify-content: space-between;
          .qrtitle {
            width: 120px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
            background: url("../../static/icones/qrcode1.png") no-repeat center;
          }
        }
      }
      .content-title {
        width: 100%;
        height: 98px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .titless {
          font-size: 15px;
          color: #3d3d3d;
          .title {
            display: flex;
            .brandnew {
              min-width: 36px;
              height: 18px;
              line-height: 18px;
              border-radius: 9px;
              background-color: #157afe;
              margin-right: 10px;
              font-size: 12px;
              color: #fff;
              text-align: center;
            }
            .newtitle {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              margin-top: -6px !important;
            }
          }
        }
        .namess {
          width: 100px;
          height: 18px;
          line-height: 18px;
          font-size: 10px;
          color: #6d6d6d;
          text-align: center;
          border-radius: 11px;
          background: rgba(0, 0, 0, 0.05);
        }
      }
    }
  }
  .base {
    width: 100%;
    min-height: 46px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.16);
    margin-top: 8px;
    padding: 0 10px;
    .item {
      width: 100%;
      height: 46px;
      display: flex;
      align-items: center;
      .name {
        width: 55px;
        font-size: 14px;
        line-height: 20px;
        color: #000000;
        margin-left: 10px;
      }
      .text {
        flex: 1;
        // width: 290px;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 20px;
        color: #9d9d99;
        height: 46px;
        .tag {
          width: 108px;
          height: 20px;
          line-height: 20px;
          margin: 0 5px;
          //   opacity: 0.07;
          font-size: 12px;
          color: #0096ff;
          text-align: center;
          border-radius: 2px;
          background-color: #ddf1ff;
        }
        .no-quan {
          color: #9d9d9d;
          font-size: 12px;
        }
        .serve {
          color: #242424;
        }
        .flow-right {
          width: 18px;
          height: 18px;
          margin-left: auto;
        }
      }
    }
  }

  .goods-tabs {
    padding: 0 10px;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 50px;
    .tabs {
      height: 57px;
      // border-bottom: 1px solid #37A9FF;
      z-index: 100;
      padding: 0 10px;
      width: 100%;
      .item {
        font-size: 16px;
        color: #333333;
        position: relative;
        transition: color 0.3s;
        height: 28px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        border-radius: 14px;
        width: 76px;
        &.select {
          background-color: #0096ff;
          color: #ffffff;
        }
        // .line {
        //   position: absolute;
        //   left: 0;
        //   bottom: 0;
        //   width: 100%;
        //   height: 4px;
        //   background: #37A9FF;
        //   border-radius: 2px;
        // }
      }
    }
    .taro_html {
      image {
        width: 100%;
        height: auto;
      }
    }
    .tips {
      height: 94px;
      margin-top: 12px;
      padding-bottom: 12px;
      margin-left: 14px;
      margin-bottom: 10px;
      .title {
        color: #ff5846;
        font-size: 14px;
      }
      .content {
        color: #555555;
        font-size: 12px;
        margin-top: 6px;
        line-height: 18px;
      }
    }
  }

  .company-img {
    width: 375px;
    height: 85px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
    margin-top: 4px;
    .img {
      width: 363px;
      height: 73px;
    }
  }
  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 10px;
    // bottom: constant(safe-area-inset-bottom);
    // bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: 50px;
    // height: calc(50px + constant(safe-area-inset-bottom));
    // height: calc(50px + env(safe-area-inset-bottom));
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
    // z-index: 101;
    .left {
      height: 100%;
      margin-left: 14px;
      .item {
        margin-right: 28px;
        display: flex;
        flex-direction: column;
        .icon {
          width: 23px;
          height: 23px;
        }
        .text {
          font-size: 11px;
          color: #000000;
          margin-top: 3px;
        }
      }
    }
    .right {
      margin-left: auto;
      height: 100%;
      .goods-btn {
        width: 100px;
        height: 34px;
      }
    }
  }
}
</style>
